<template>
  <formDialog
    :dialogFormVisible="dialogFormVisible"
    :height="90"
    @close="
      (event) => {
        $emit('setDialog', event);
      }
    "
    :title="title"
  >
    <template #form>
      <scroll>
        <el-form
          label-position="top"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="formBox mb-20">
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="学院名称">
                  <el-input
                    v-model="addDetailInfo.facultyName"
                    size="mini"
                    :placeholder="'请输入学院名称'"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实验室" prop="laboratoryName">
                  <selectName
                    :selectArr="laboratoryData"
                    :title="false"
                    keys="laboratoryName"
                    label="laboratoryName"
                    valueKey="laboratoryName"
                    :placeholder="'请选择实验室'"
                    :value="ruleForm.laboratoryName"
                    @dropDown="(val) => (ruleForm.laboratoryName = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="设备类型" prop="equipmentType">
                  <selectName
                    :selectArr="equipmentTypeList"
                    :title="false"
                    keys="id"
                    label="name"
                    valueKey="id"
                    :placeholder="'请选择设备类型'"
                    :value="ruleForm.equipmentType"
                    @dropDown="(val) => (ruleForm.equipmentType = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称" prop="equipmentName">
                  <el-input
                    v-model="ruleForm.equipmentName"
                    size="mini"
                    @blur="outequipment"
                    :placeholder="'请输入设备名称'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="设备型号" prop="equipmentModel">
                  <el-input
                    v-model="ruleForm.equipmentModel"
                    size="mini"
                    :placeholder="'请输入设备型号'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="网络编号" prop="netNum">
                  <el-input
                    size="mini"
                    :placeholder="'请输入网络编号'"
                    v-model="ruleForm.netNum"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="设备数量" prop="equipmentNum">
                  <el-input
                    v-model="ruleForm.equipmentNum"
                    size="mini"
                    :placeholder="'请输入设备数量'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生产日期" prop="productDate">
                  <Time
                    :type="'date'"
                    :value="ruleForm.productDate"
                    @valueChange="(event) => (ruleForm.productDate = event)"
                  ></Time>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="维护周期" prop="maintenancePeriod">
                  <el-input
                    class="maintenanceInput"
                    v-model="ruleForm.maintenancePeriod"
                    size="mini"
                    :placeholder="'请输入维护周期'"
                  ></el-input>
                  <span class="maintenancePeriod">d</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生产厂家" prop="factoryName">
                  <selectName
                    :selectArr="addDetailInfo.factoryList"
                    :title="false"
                    keys="factoryName"
                    label="factoryName"
                    valueKey="factoryName"
                    :placeholder="'请选择生产厂家'"
                    :value="ruleForm.factoryName"
                    @dropDown="(val) => (ruleForm.factoryName = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="联系方式" prop="contaction">
                  <el-input
                    v-model="ruleForm.contaction"
                    size="mini"
                    :placeholder="'请输入联系方式'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="厂家地址" prop="factoryAddress">
                  <el-input
                    v-model="ruleForm.factoryAddress"
                    size="mini"
                    :placeholder="'请输入厂家地址'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="formBox">
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="采购人员（不可修改）">
                  <el-input
                    v-model="addDetailInfo.buyer"
                    size="mini"
                    :placeholder="'请输入采购人员'"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式（不可修改）">
                  <el-input
                    v-model="addDetailInfo.phone"
                    :disabled="true"
                    size="mini"
                    :placeholder="'请输入采购人员联系方式'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </scroll>
    </template>
    <template #bottom>
      <div class="bottom">
        <div class="more" @click="submitform('ruleForm')">提交</div>
      </div>
    </template>
  </formDialog>
</template>

<script>
import { addEquipment, equipmentNameIsRepeat, factoryInfo } from "@/http/api";
export default {
  props: ["dialogFormVisible", "title", "laboratoryData", "addDetailInfo"],
  data() {
    var validatePHone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入厂家联系方式"));
      } else {
        if (this.ruleForm.contaction.length !== 11) {
          callback(new Error("请输入正确的手机格式"));
        }
        callback();
      }
    };
    return {
      equipmentTypeList: [
        {
          id: "1",
          name: "仪器设备",
        },
        {
          id: "2",
          name: "耗材柜",
        },
        {
          id: "3",
          name: "环境监测设备",
        },
        {
          id: "4",
          name: "门禁",
        },
        {
          id: "5",
          name: "视频",
        },
        {
          id: "6",
          name: "能耗监测设备",
        },
      ],
      ruleForm: {
        // facultyName: "", //学院名称
        equipmentType: "", //	设备类型
        laboratoryName: "", //实验室
        equipmentName: "", //设备名称
        equipmentModel: "", //设备型号
        equipmentNum: "", //设备数量
        netNum: "", //网络编号
        productDate: "", //生产日期
        maintenancePeriod: "", //维护周期
        factoryName: "", //生产厂家
        contaction: "", //联系方式
        factoryAddress: "", //厂家地址
        // buyer: "", //采购人员
        // buyerContaction: "", //采购人员联系方式
      },

      rules: {
        facultyName: [
          { required: true, message: "请输入学院名称", trigger: "blur" },
        ],
        equipmentType: [
          { required: true, message: "请选择设备类型", trigger: "change" },
        ],
        laboratoryName: [
          { required: true, message: "请选择实验室", trigger: "blur" },
        ],
        equipmentName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        equipmentModel: [
          { required: true, message: "请输入设备型号", trigger: "blur" },
        ],
        netNum: [
          { required: true, message: "请输入网络编号", trigger: "blur" },
        ],
        equipmentNum: [
          { required: true, message: "请输入设备数量", trigger: "blur" },
        ],
        productDate: [
          {
            required: true,
            message: "请选择设备生产日期",
            trigger: "change",
          },
        ],
        maintenancePeriod: [
          { required: true, message: "请输入维护周期", trigger: "blur" },
        ],
        factoryName: [
          { required: true, message: "请输入设备生产厂家", trigger: "blur" },
        ],
        contaction: [
          {
            required: true,
            message: "请输入厂家联系方式",
            trigger: "blur",
          },
          { validator: validatePHone, trigger: "blur" },
        ],
        factoryAddress: [
          {
            required: true,
            message: "请输入厂家地址",
            trigger: "blur",
          },
        ],
        buyer: [{ required: true, message: "请输入采购人员", trigger: "blur" }],
        buyerContaction: [
          {
            required: true,
            message: "请输入采购人员联系方式",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    /* 确定按钮 */
    submitform(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            equipmentType: this.ruleForm.equipmentType,
            laboratoryName: this.ruleForm.laboratoryName,
            equipmentNum: this.ruleForm.equipmentNum,
            equipmentName: this.ruleForm.equipmentName,
            netNum: this.ruleForm.netNum,
            equipmentModel: this.ruleForm.equipmentModel,
            productDate: this.ruleForm.productDate,
            maintenancePeriod: this.ruleForm.maintenancePeriod,
            factoryName: this.ruleForm.factoryName,
            buyerContaction: this.addDetailInfo.phone,
          };
          let res = await addEquipment(params);
          if (res.code === 20000) {
            this.$emit("setDialog", false);
            this.$refs[formName].resetFields();
            this.$parent.initData(this.$parent.commonIndex);
            this.$notify({
              message: res.message,
              duration: 1000,
            });
          }
        } else {
          return false;
        }
      });
    },
    // 获取厂家信息
    async initfactoryInfo(factoryName) {
      let params = {
        factoryName: factoryName,
      };
      let res = await factoryInfo(params);
      if (res.code === 20000) {
        this.ruleForm.contaction = res.data.contaction; //联系方式
        this.ruleForm.factoryAddress = res.data.factoryAddress;
      }
    },
    // 设备管理查询设备名称是否重复
    async outequipment() {
      let params = {
        equipmentName: this.ruleForm.equipmentName,
      };
      let res = await equipmentNameIsRepeat(params);
      if (res.code === 20000) {
        if (res.data) {
          this.$message("该设备已存在");
        }
      }
    },
  },
  watch: {
    "ruleForm.factoryName": {
      handler(val) {
        this.initfactoryInfo(val);
      },
      deep: true,
    },
  },
};
</script>

<style>
</style>